<!-- Created Time:23/07/20 10:45:22 -->
<!-- Created By: Mande.Huang-->
<!-- Description: 点击开始的菜单栏 -->
<template>
  <!-- windows菜单 -->
  <div class="navigation-menu">
    <!-- windows菜单左部操作按钮 -->
    <div class="left-bar">
      <button>
        <i class="fas fa-grip-lines"></i>
        <span>开始</span>
      </button>
      <div class="actions">
        <button>
          <i class="fas fa-user-circle"></i>
          <span>用户</span>
        </button>
        <button>
          <i class="far fa-file"></i>
          <span>文档</span>
        </button>
        <button>
          <i class="fas fa-download"></i>
          <span>下载</span>
        </button>
        <button>
          <i class="fas fa-music"></i>
          <span>音乐</span>
        </button>
        <button>
          <i class="fas fa-image"></i>
          <span>图片</span>
        </button>
        <button>
          <i class="fas fa-video"></i>
          <span>视频</span>
        </button>
        <button>
          <i class="fas fa-desktop"></i>
          <span>网络</span>
        </button>
        <button>
          <i class="fas fa-id-card-alt"></i>
          <span>个人文件夹</span>
        </button>
        <button>
          <i class="fas fa-file"></i>
          <span>文件资源管理器</span>
        </button>
        <button>
          <i class="fas fa-cog"></i>
          <span>设置</span>
        </button>
        <button class="open-btn">
          <div class="open-btn-modal">
            <button @click="sleep">
              <i class="far fa-moon"></i>
              <span>睡眠</span>
            </button>
            <button @click="shutDown">
              <i class="fas fa-power-off"></i>
              <span>关机</span>
            </button>
            <button @click="reload">
              <i class="fas fa-undo"></i>
              <span>重启</span>
            </button>
          </div>
          <i class="fas fa-power-off"></i>
          <span>电源</span>
        </button>
      </div>
    </div>
    <!-- windows菜单右部apps图标 -->
    <div class="container">
      <div class="folder" v-for="folder in this.$store.getters.getInstalledApps" :key="folder.id"
        @click="openFolder(folder.path, folder.icon, folder.title)">
        <img :src="require(`/src/assets/folder-icons/${folder.icon}.svg`)" width="20" :alt="folder.title" />
        {{ folder.title }}
      </div>
    </div>
  </div>
</template>

<script>
import { setFolder } from "../../helpers/folders";
import { getLocal } from "../../helpers/local";
export default {
  name: "NavMenu",
  props: ["menuView"],
  data() {
    return {

    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    reload() {
      this.$emit("reloadStatus", true);
      setTimeout(() => {
        window.location.reload();
      }, 3000);
    },
    sleep() {
      this.$emit("sleep", true);
      document.addEventListener("keydown", () => {
        this.$emit("sleep", false);
      });
    },
    shutDown() {
      this.$emit("shutDownStatus", true);
      setTimeout(() => {
        this.$emit("sleep", true);
        document.addEventListener("keydown", () => {
          this.$emit("sleep", false);
        });
        setTimeout(() => {
          this.$emit("shutDownStatus", false);
        }, 100);
      }, 4000);
    },
    openFolder(path, icon, title) {
      this.isActive = false;
      if (path && icon && title) {
        setFolder(title, icon, path);
        this.$store.dispatch("fetchFolders", getLocal("windows-folders"));
        this.$emit("hideMenu", false);
      }
    },
  },
}
</script>

<style lang="scss" scoped>
html.dark {
  .navigation-menu {
    background: rgba(#111, 0.9);
    color: #e9e9e9;

    .container .folder:hover {
      background: linear-gradient(to left, rgba(#333, 0.5), transparent);
    }

    .left-bar {
      background: #111;

      * {
        color: #e9e9e9;
      }

      button:hover {
        background: #333;
      }
    }

    .open-btn .open-btn-modal {
      background: #222;
    }
  }
}

.navigation-menu {
  position: absolute;
  left: 0;
  bottom: 30px;
  height: 500px;
  width: 330px;
  background: rgba(#ddd, 0.9);
  display: flex;
  z-index: 99;
  backdrop-filter: blur(2px);

  .left-bar {
    height: 100%;
    width: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: #ddd;

    &:hover {
      position: absolute;
      width: 230px;

      button {
        justify-content: start;

        span {
          visibility: visible;
          position: relative;
        }

        i {
          margin-right: 15px;
        }
      }
    }

    button {
      height: 35px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      i {
        min-width: 50px;
        font-size: 15px;
        color: rgba(#000, 0.8);
      }

      span {
        visibility: hidden;
        position: absolute;
      }

      &:hover {
        color: black;
        background: #fff;
      }
    }

    .actions {
      width: 100%;
    }
  }

  .container {
    flex: 1;
    height: 100%;
    overflow: auto;
    padding: 10px 0;

    .folder {
      height: 45px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      user-select: none;

      &:hover {
        background: linear-gradient(to left, rgba(#fff, 0.5), transparent);
      }

      img {
        margin-right: 10px;
      }
    }
  }

  .open-btn {
    position: relative;

    &:hover .open-btn-modal {
      display: block;
    }

    .open-btn-modal {
      display: none;
      position: absolute;
      right: 0;
      top: -300%;
      background: #ddd;
      box-shadow: -4px 0 15px rgba(#000, 0.2);
      width: 100%;
    }
  }
}
</style>
